<template>
  <template v-if="articleList.length > 0">
    <a-timeline>
      <a-timeline-item
        v-for="article in articleList"
        :key="article.id"
        color="#4e6ef2"
      >
        <router-link :to="`/article/${article.id}`">
          <a-card class="timeline-card">
            <el-image
              :src="article.poster"
              class="timeline-card__poster"
              fit="fill"
              lazy
            ></el-image>

            <div class="timeline-card__info">
              <time>{{ article.formattedCreateTime }}</time>
              <h4 class="ellipsis" :title="article.article_name">
                {{ article.article_name }}
              </h4>
              <router-link
                class="category"
                v-for="category in article.categories"
                :key="category.id"
                :to="`/Category/${category.categoryName}`"
              >
                <span> {{ category.categoryName }}</span>
              </router-link>
            </div>
          </a-card>
        </router-link>
      </a-timeline-item>
    </a-timeline>
  </template>

  <!-- 如果没有数据的话,就显示这个 -->
  <template v-else-if="!loading">
    <a-empty />
  </template>

  <a-skeleton :loading="loading" active :paragraph="{ rows: 6 }" />

  <!-- 这玩意还是自己写一写吧,当做锻炼自己,算了,下一个组件的时候再写 -->
  <a-divider>
    <a-button
      shape="round"
      type="primary"
      @click="loadMore"
      v-if="articleList.length < total"
      >加载更多</a-button
    >
    <span v-else>没有更多了</span>
  </a-divider>
</template>

<script lang="ts">
import { articleService } from '@/api/article';
import { ArticleDTO } from '@/bean/dto';
import { pageSize } from '@/config/config';
import { useAsyncLoading } from '@/hooks/async';
import { format } from '@/utils/date-utils';
import { Card, Divider, Timeline } from 'ant-design-vue';
import { defineComponent, reactive, ref, watchEffect } from 'vue';

export default defineComponent({
  name: 'Timeline',
  components: {
    [Timeline.name]: Timeline,
    [Timeline.Item.name]: Timeline.Item,
    [Card.name]: Card,
    [Divider.name]: Divider,
  },
  setup() {
    const articleList = ref<ArticleDTO[]>([]);

    // 我感觉这个玩意统一会好一点吧
    const pageInfo = reactive({
      pageNo: 1,
      pageSize,
    });

    const total = ref(0);

    const handleGetArticleList = async () => {
      const res = await articleService.Page(pageInfo);
      console.log(res);
      const mappedData = res.data.map((item) => {
        return {
          ...item,
          formattedCreateTime: format(item.create_time),
        };
      });
      articleList.value = [...articleList.value, ...mappedData];
      total.value = res.total;
    };

    // 获取数据
    const { trigger: getArticleList, loading } =
      useAsyncLoading(handleGetArticleList);

    // react的useEffect,优雅的一比
    watchEffect(() => {
      getArticleList();
    });

    const loadMore = () => {
      if (articleList.value.length < total.value) {
        pageInfo.pageNo++;
      }
    };

    return { articleList, loading, total, loadMore };
  },
});
</script>

<style lang="scss" scoped>
:deep(.timeline-card) {
  border: 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .ant-card-body {
    display: flex;
    padding: 10px;
  }
  .timeline-card__poster {
    width: 80px;
    height: 60px;
  }
  .timeline-card__info {
    flex: 1;
    margin-left: 10px;
    font-size: 12px;
    overflow: hidden;
    > time {
      color: #999;
    }
    > h4 {
      margin: 3px 0;
      font-size: 14px;
      line-height: 1.2em;
    }
    .category {
      font-weight: 700;
      + .category::before {
        content: ', ';
      }
    }
  }
}
</style>
